div[data-controller="icons-checkmark"] {
  .blue {
    .first {
      stop-color: #3EDCFF;
    }
    .second {
      stop-color: #3E9AFF;
    }
  }

  .green {
    .first {
      stop-color: #44FFDD;
    }
    .second {
      stop-color: #05C168;
    }
  }

  .orange {
    .first {
      stop-color: #FFB444;
    }
    .second {
      stop-color: #FF6644;
    }
  }

  .white {
    .first {
      stop-color: #{$gray-100};
    }
    .second {
      stop-color: #{$gray-100};
    }
  }

  .purple {
    .first {
      stop-color: #5337FF;
    }
    .second {
      stop-color: #A175FF;
    }
  }

  .disabled {
    .first {
      stop-color: #{$gray-500};
    }
    .second {
      stop-color: #{$gray-500};
    }
  }
}


.disabled {
  div[data-controller="icons-checkmark"] {
    stop {
      &.first {
        stop-color: #{$gray-500};
      }
      &.second {
        stop-color: #{$gray-500};
      }
    }
  }
}
